<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  input.time {
    border: none;
    font-size: 16px;
    padding-left: 10px;
  }

</style>
<template>
  <div class="sendcar">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      录入生产计划
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">名称</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="name" placeholder="请输入计划名称" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">货品所属</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="orgid" v-model="orgid">
                <option value="" disabled>请选择货品所属公司</option>
                <option  v-for="(item, index) in organizations" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">库房</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="strmid" v-model="strmid">
                <option value="" disabled>请选择库房</option>
                <option v-for="(item, index) in storerooms" :key="item.srguid" :value="item.srguid">{{item.storeName}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">负责人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="principal" placeholder="请输入负责人" />
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">总重量(吨)</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="number" name="weight" placeholder="请输入总重量" />-->
<!--            </div>-->
<!--          </div>-->
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">生产日期</label></div>
            <div class="weui-cell__bd">
              <input type="text" id='datetime-picker' class="time" name="planstart" placeholder="请选择开始时间" />
            </div>
          </div>
          <!--<div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">计划结束时间</label></div>
            <div class="weui-cell__bd">
              <input type="text" id='datetime-picker2' class="time" name="planend" placeholder="请选择结束时间" />
            </div>
          </div>-->
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">包工计价方式</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="pricemode" v-model="pricemode">
                <option  v-for="(item, index) in pricemodes" :key="item.guid" :value="item.dictkey">{{item.dicttext}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="remarks" placeholder="请输备注内容" rows="2"></textarea>
            </div>
          </div>
        </div>
        <div class="oitem">
          <div class="weui-cells__title">货品明细1
            <p id="acts" style="float: right;color: #1aad19;">
              <span id="addItem" style="padding-right: 5px;">添加</span>
            </p>
          </div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[0].productname" />
              <select class="weui-select product" data-index="0" name="items[0].productid">
                <option value="">请选择产品</option>
                <option v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[0].spename" />
              <select class="weui-select specif" name="items[0].speid">
                <option value="">请选择规格</option>
                <option v-for="(item, index) in specifications0" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number"  name="items[0].weight" placeholder="请输入重量" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="items[0].remark" placeholder="请输备注内容" rows="2"></textarea>
            </div>
          </div>
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细2</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[1].productname" disabled="true"  />
              <select class="weui-select product" data-index="1" name="items[1].productid" disabled="true" >
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products" :value="item.guid">{{item.productname}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[1].spename" disabled="true"  />
              <select class="weui-select specif" name="items[1].speid" disabled="true" >
                <option value="">请选择规格</option>
                <option  v-for="(item, index) in specifications1" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number"  name="items[1].weight" disabled="true"  />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="items[1].remark" placeholder="请输备注内容" rows="2" disabled="true" ></textarea>
            </div>
          </div>
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细3</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[2].productname" disabled="true"  />
              <select class="weui-select product" data-index="2" name="items[2].productid" disabled="true" >
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[2].spename" disabled="true"  />
              <select class="weui-select specif" name="items[2].speid" disabled="true" >
                <option value="">请选择规格</option>
                <option  v-for="(item, index) in specifications2" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number"  name="items[2].weight" disabled="true"  />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="items[2].remark" placeholder="请输备注内容" rows="2" disabled="true" ></textarea>
            </div>
          </div>
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细4</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[3].productname" disabled="true"  />
              <select class="weui-select product" data-index="3" name="items[3].productid" disabled="true" >
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[3].spename" disabled="true"  />
              <select class="weui-select specif" name="items[3].speid" disabled="true" >
                <option value="">请选择规格</option>
                <option  v-for="(item, index) in specifications3" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number"  name="items[3].weight" disabled="true"  />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="items[3].remark" placeholder="请输备注内容" rows="2" disabled="true" ></textarea>
            </div>
          </div>
        </div>
        <div class="oitem hide">
          <div class="weui-cells__title">货品明细5</div>
          <div class="weui-cell weui-cell_select fir">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[4].productname" disabled="true"  />
              <select class="weui-select product" data-index="4" name="items[4].productid" disabled="true" >
                <option value="">请选择产品</option>
                <option  v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="items[4].spename" disabled="true"  />
              <select class="weui-select specif" name="items[4].speid" disabled="true" >
                <option value="">请选择规格</option>
                <option  v-for="(item, index) in specifications4" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number"  name="items[4].weight" disabled="true"  />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="items[4].remark" placeholder="请输备注内容" rows="2" disabled="true" ></textarea>
            </div>
          </div>
        </div>

        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"  href="javascript:" @click="send">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'AddProduceplan',
        data () {
            return {
                openid: localStorage.openid,
                storerooms: [],
                organizations: [],
                orgid: '',
                products: [],
                specifications0: [],
                specifications1: [],
                specifications2: [],
                specifications3: [],
                specifications4: [],
                strmid: '',
                pricemodes: [],
                pricemode: ''
            }
        },
        created() {
            window.addEventListener('setItem', ()=> {
                this.openid = localStorage.getItem('openid');
            })
        },
        mounted () {
            let that = this;

            $("#datetime-picker").calendar();
            $("#datetime-picker2").calendar();

            //获取包工计价方式
            this.getPricemode()
            //获取组织
            this.getOrganization()
            //获取库房
            this.getStoreRoom()

            //this.getProduct()
            //获取规格
            //this.getSpecif()

            //添加明细item
            $('form').on('click', '#addItem', function () {
                $('.oitem:hidden').eq(0).find('input').attr("disabled",false);
                $('.oitem:hidden').eq(0).find('textarea').attr("disabled",false);
                $('.oitem:hidden').eq(0).find('select').attr("disabled",false);
                $('.oitem:hidden').eq(0).show();
                updateActBtns();
            })
            //删除明细
            $('form').on('click', '#delItem', function () {
                var elm = $(this).parents('.oitem');
                $.confirm("确定要删除该货品明细吗？", function () {
                    elm.find('input').val('');
                    elm.find('textarea').val('');
                    elm.hide();
                    $('.oitem:hidden').eq(0).find('input').attr("disabled",true);
                    $('.oitem:hidden').eq(0).find('textarea').attr("disabled",true);
                    $('.oitem:hidden').eq(0).find('select').attr("disabled",true);
                    updateActBtns();
                })
            })
            //调整添加、删除按钮位置
            function updateActBtns() {
                $('#acts').remove();
                var actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="addItem" style="padding-right: 5px;">添加</span><span>|</span><span id="delItem" style="padding-left: 5px;">删除</span></p>';

                if ($('.oitem:visible').length == 5) {
                    actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="delItem" style="padding-left: 5px;">删除</span></p>';
                } else if ($('.oitem:visible').length == 1) {
                    var actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="addItem" style="padding-right: 5px;">添加</span></p>';
                }
                $('.oitem:visible:last').find('.weui-cells__title').append(actHtml);
            }

            //产品、规格名称表单提交
            $('.product').change(function () {
                let product = $(this).find('option:selected').text();
                $(this).prev().val(product);
                that.getSpecif($(this).val(), $(this).data('index'));
            })
            $('.specif').change(function () {
                let specif = $(this).find('option:selected').text();
                $(this).prev().val(specif);
            })
        },
        watch: {
            'orgid': function (val) {
                //获取产品
                this.getProduct()
            },
            'strmid': function (val) {
                //获取产品
                this.getProduct()
            }
        },
        methods: {
            getPricemode: function() {
                let that = this;
                this.axios({
                    method: 'get',
                    responseType: 'json',
                    url: '/sales/Sellform!findDict.action',
                    params: {type: 35}
                }).then(response => {
                    if (response.statusText == "OK") {
                        that.pricemodes = response.data;
                        this.pricemode = response.data[0].dictkey;
                    } else {
                        this.toastText('获取包工计价方式数据失败');
                    }
                });
            },
            getOrganization: function() {
                this.axios({
                    method: 'get',
                    url: '/produce/Produceplan!getOrgbyWh.action',
                    params: {}
                }).then((response) => {
                    if (response.data.status == 'true') {
                        this.organizations = response.data.result;
                        this.orgid = response.data.result[0].guid;
                    } else if(response.data.status == 'false') {
                        this.toastError(response.data.result);
                    } else {
                        this.toastError("系统错误");
                    }

                })
            },
            getStoreRoom: function() {
                this.axios({
                    method: 'get',
                    url: '/produce/Produceplan!getSrbyWh.action?openid=' + this.openid,
                }).then((response) => {
                    if (response.data.status == 'true') {
                        this.storerooms = response.data.result;
                        this.strmid = response.data.result[0].srguid;
                    } else if(response.data.status == 'false') {
                        this.toastError(response.data.result);
                    } else {
                        this.toastError("系统错误");
                    }

                })
            },
            getProduct: function() {
                if (this.orgid == '' || this.strmid == '') return;
                this.axios({
                    method: 'get',
                    url: '/sales/Sellform!findProductinfoBYStr.action?openid=' + this.openid + '&guid=' + this.strmid,
                    params: {orgguid: this.orgid}
                }).then((response) => {
                    if (response.data.status == 'true') {
                        this.products = response.data.result;
                    } else if(response.data.status == 'false') {
                        this.toastError(response.data.result);
                    } else {
                        this.toastError("系统错误");
                    }

                })
            },
            getSpecif: function(productid, index) {
              this.axios({
                method: 'get',
                url: '/produce/Whinapply!getSpeByproduct.action',
                params: {productid: productid}
              }).then((response) => {
                if (response.data.msg == 'success') {
                  let data = response.data;
                  this['specifications' + index] = data.specifications;
                  console.log('specifications0:', index)
                } else {
                  this.toastError("系统错误");
                }

              })
                // this.axios({
                //     method: 'get',
                //     url: '/sales/Sellform!findSalesspecification.action?openid=' + this.openid
                // }).then((response) => {
                //     if (response.data.status == 'true') {
                //         this.specifications = response.data.result;
                //     } else if(response.data.status == 'false') {
                //         this.toastError(response.data.result);
                //     } else {
                //         this.toastError("系统错误");
                //     }
                //
                // })
            },
            send: function() {
                if(!checkSubmit()){
                    return;
                }
                if (!this.checkEmy('product')) {
                    this.toastError('产品有误！');
                    return false;
                }
                if (!this.checkEmy('specif')) {
                    this.toastError('规格有误！');
                    return false;
                }
                if (!this.checkEmy('weight')) {
                    this.toastError('明细重量有误！');
                    return false;
                }
                if (!this.checkProduct()) {
                    $.toast('货品明细产品重复！', 'forbidden')
                    return false;
                }
                //防止重复提交
                $('.subbtn').attr("disabled",true).css("pointer-events","none");

                this.axios({
                    method: 'post',
                    url: '/produce/Produceplan!saveOrUpdate.action?openid=' + this.openid,
                    //params: $("#formid").serialize()
                    params: this.serialize2Obj($("#formid").serializeArray())
                }).then(response => {
                    //恢复提交按钮可点击
                    $('.subbtn').attr('disabled', false).css("pointer-events","auto");

                    if(response.data.status == "true"){
                        this.toastText('操作成功!');
                        this.$router.push({name: 'ProduceplanList'});
                    }else if (response.data.status == 'false'){
                        this.toastError('请重新登录!');
                    }else {
                        this.toastError('系统错误!');
                    }
                }).catch(function (error) {
                    //恢复提交按钮可点击
                    $('.subbtn').attr('disabled', false).css("pointer-events","auto");
                    this.toastError('系统错误');
                });

            },
            //判断明细产品是否重复
            checkProduct: function () {
                let parr1 = [];
                let parr2 = [];
                for (let i=0; i<$('.product').not(':hidden').length; i++) {
                    parr1.push({[$('.product').eq(i).val()]: $('.specif').eq(i).val()});
                    parr2.push({[$('.product').eq(i).val()]: $('.specif').eq(i).val()});
                }
                //json数组去重
                for (var i = 0; i < parr2.length; i++) {
                    for (var j =i+1; j <parr2.length; ) {
                        if (Object.keys(parr2[i])[0] == Object.keys(parr2[j])[0] && Object.values(parr2[i])[0] == Object.values(parr2[j])[0] ) {
                            parr2.splice(j, 1);//去除重复的对象；
                        }else {
                            j++;
                        }
                    }
                }
                return parr1.length == parr2.length ? true : false;
            }
        }
    }
    /**
     * 提交之前的校验
     */
    function checkSubmit(){
        //物流公司
        if($('select[name="orgid"]').val() == ''){
            $.alert("请选择货品所属公司！");
            return false;
        } else if($('select[name="strmid"]').val() == ''){
            $.alert("请选择库房！");
            return false;
        } else if($('select[name="weight"]').val() == ''){
            $.alert("请输入总重量！");
            return false;
        } else if($('select[name="planstart"]').val() == ''){
            $.alert("请选择计划开始时间！");
            return false;
        } else if($('select[name="planend"]').val() == ''){
            $.alert("请选择计划结束时间！");
            return false;
        }

        return true;
    }

</script>
